import mojs from "mo-js";
/* Add Button Animation */
export function addAnimation(animationDiv) {
  const Burst1 = new mojs.Burst({
    parent: animationDiv,
    top: "50%",
    left: "50%",
    radius: { 0: 80 },
    count: 8,
    children: {
      shape: "circle",
      fill: { red: "blue" },
      strokeWidth: 1,
      duration: 600,
      stroke: { red: "blue" },
    },
  });

  const Burst2 = new mojs.Burst({
    parent: animationDiv,
    top: "50%",
    left: "50%",
    radius: { 0: 100 },
    count: 4,
    children: {
      shape: "rect",
      fill: "white",
      strokeWidth: 1,
      duration: 300,
      stroke: "white",
    },
  });

  const circle1 = new mojs.Shape({
    radius: { 0: 40 },
    parent: animationDiv,
    fill: "none",
    stroke: "white",
    strokeWidth: 15,
    duration: 300,
    opacity: { 1: 0 },
  });

  const circle2 = new mojs.Shape({
    radius: { 0: 50 },
    parent: animationDiv,
    fill: "none",
    stroke: "red",
    strokeWidth: 5,
    duration: 400,
    opacity: { 1: 0 },
  });

  const circle3 = new mojs.Shape({
    radius: { 0: 60 },
    parent: animationDiv,
    fill: "none",
    stroke: "blue",
    strokeWidth: 5,
    duration: 500,
    opacity: { 1: 0 },
  });

  const circle4 = new mojs.Shape({
    radius: { 0: 70 },
    parent: animationDiv,
    fill: "white",

    stroke: "white",
    strokeWidth: 5,
    duration: 600,
    opacity: { 1: 0 },
  });

  const timeline = new mojs.Timeline({
    repeat: 0,
  }).add(circle4, circle1, circle2, circle3, Burst1, Burst2);

  timeline.play();
}

/* Delete item animation */

export function checkAnimation(checkItem) {
  const circle1 = new mojs.Shape({
    radius: { 0: 1000 },
    parent: checkItem,
    fill: "#7bef28",
    stroke: "white",
    strokeWidth: 10,
    duration: 500,
    opacity: { 1: 0 },
  });

  const circle2 = new mojs.Shape({
    radius: { 0: 200 },
    parent: checkItem,
    fill: "none",
    stroke: "white",
    strokeWidth: 30,
    duration: 300,
    opacity: { 1.7: 0 },
  });

  const circle3 = new mojs.Shape({
    radius: { 0: 400 },
    parent: checkItem,
    fill: "none",
    stroke: "#230e5780",
    strokeWidth: 10,
    duration: 400,
    opacity: { 1: 0 },
  });

  const timelineX = new mojs.Timeline({
    repeat: 0,
  }).add(circle1, circle2, circle3);
  timelineX.play();
}

export function deleteAnimation(deleteItem) {
  /* LEFT SIDE */
  const swirlR1 = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "0%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -100 },
    radius: 30,
    swirlSize: 5,
    swirlFrequency: 1,
    duration: 500,
    direction: -1,
    degreeShift: 90,
  });
  const swirlR2 = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "0%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -85 },
    radius: 25,
    swirlSize: 5,
    swirlFrequency: 1,
    duration: 500,
    direction: -1,
    degreeShift: 70,
  });
  const swirlR3 = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "0%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -70 },
    radius: 20,
    swirlSize: 5,
    swirlFrequency: 1,
    duration: 1000,
    direction: -1,
    degreeShift: 50,
  });

  const swirlL1 = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "0%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -100 },
    radius: 30,
    swirlSize: 30,
    swirlFrequency: 1,
    duration: 1000,
    direction: -1,
    degreeShift: -90,
  });
  const swirlL2 = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "0%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -85 },
    radius: 30,
    swirlSize: 30,
    swirlFrequency: 1,
    duration: 500,
    direction: -1,
    degreeShift: -10,
  });
  const swirlL3 = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "0%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -70 },
    radius: 30,
    swirlSize: 30,
    swirlFrequency: 1,
    duration: 500,
    direction: -1,
    degreeShift: -30,
  });

  /* RIGHT SIDE */
  const swirlR1B = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "100%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -100 },
    radius: 30,
    swirlSize: 5,
    swirlFrequency: 1,
    duration: 500,
    direction: -1,
    degreeShift: -90,
  });
  const swirlR2B = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "100%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -85 },
    radius: 25,
    swirlSize: 5,
    swirlFrequency: 1,
    duration: 500,
    direction: -1,
    degreeShift: -70,
  });
  const swirlR3B = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "100%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -70 },
    radius: 20,
    swirlSize: 5,
    swirlFrequency: 1,
    duration: 1000,
    direction: -1,
    degreeShift: -50,
  });

  const swirlL1B = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "100%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -100 },
    radius: 30,
    swirlSize: 30,
    swirlFrequency: 1,
    duration: 1000,
    direction: -1,
    degreeShift: 90,
  });
  const swirlL2B = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "100%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -85 },
    radius: 30,
    swirlSize: 30,
    swirlFrequency: 1,
    duration: 500,
    direction: -1,
    degreeShift: 10,
  });
  const swirlL3B = new mojs.ShapeSwirl({
    parent: deleteItem,
    top: "100%",
    left: "100%",
    fill: "rgba(255,255,255,1)",
    y: { 0: -70 },
    radius: 30,
    swirlSize: 30,
    swirlFrequency: 1,
    duration: 500,
    direction: -1,
    degreeShift: 30,
  });

  const timeline = new mojs.Timeline();

  timeline.add(
    swirlR1,
    swirlR2,
    swirlR3,
    swirlL1,
    swirlL2,
    swirlL3,
    swirlR1B,
    swirlR2B,
    swirlR3B,
    swirlL1B,
    swirlL2B,
    swirlL3B
  );
  return timeline.play();
}